<template>
  <div class="goods-view">
    <div class="goods-view-header">
      <h1 @click="router.back()" class="back">< 返回</h1>
    </div>
    <div class="goods-view-content">
      <van-swipe :autoplay="3000" lazy-render class="swiper">
        <van-swipe-item
          v-for="(item, index) in goodsData.info.gallery"
          :key="index"
        >
          <img :src="item" />
        </van-swipe-item>
      </van-swipe>

      <div class="info" :style="{ 'margin-bottom': '20px' }">
        <div>
          <!-- 价格行，补充 info-price 类 -->
          <p class="info-price">
            <span>￥{{ goodsData.info.retailPrice }}</span>
            <span>{{ goodsData.info.counterPrice }}</span>
          </p>
          <!-- 商品名称，补充 info-name 类 -->
          <p class="info-name">{{ goodsData.info.name }}</p>
          <!-- 商品简介，补充 info-brief 类 -->
          <p class="info-brief">{{ goodsData.info.brief }}</p>
        </div>
      </div>

      <div class="about" :style="{ 'margin-bottom': '20px' }">
        <van-cell-group>
          <van-cell title="规格" is-link value="请选择" />
          <van-cell title="属性" is-link />
          <van-cell title="运费" value="满88元免邮" />
        </van-cell-group>
      </div>

      <div class="desc">
        <h1 class="desc-title">商品详情</h1>
        <div v-html="goodsData.info.detail" class="desc-content"></div>
      </div>
    </div>
    <div class="goods-view-footer">
      <van-action-bar>
        <van-action-bar-icon icon="chat-o" text="客服" />
        <van-action-bar-icon icon="shop-o" text="店铺" />
        <van-action-bar-button
          color="linear-gradient(to right, #ffd166, #ff8c00); "
          type="warning"
          text="加入购物车"
          @click="showPopup = true"
        />
        <van-action-bar-button color="linear-gradient(to right, #ff4b4b, #f4333c)" type="danger" text="立即购买" />
      </van-action-bar>

      <div class="cart-popup">
        <AddTo
          :show="showPopup"
          :specification-list="goodsData.specificationList"
          :img-url="goodsData.imgUrl"
          :price="goodsData.price"
          :goodsInfo="goodsData.info"
          :productList="goodsData.productList"
          @close="showPopup = false"
          @addToCart="handleAddToCart"
          @buyNow="handleBuyNow"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import { addGoods, getDetail } from "@/server/api/goods";
import { onMounted, reactive, ref } from "vue";
import AddTo from "./AddTo.vue";
const router = useRouter();
//获取url的id参数
const id = Number(router.currentRoute.value.params.id);
// console.log(id);
const goodsData = reactive({
  info: {},
  specificationList: [],
  imgUrl: "",
  price: 0,
  productList: [],
});

onMounted(async () => {
  const res = await getDetail(id);
  goodsData.info = res.data.info;
  goodsData.specificationList = res.data.specificationList;
  goodsData.imgUrl = goodsData.info.picUrl;
  goodsData.price = goodsData.info.retailPrice;
  goodsData.productList = res.data.productList;
  console.log(res);
});

const showPopup = ref(false);

const handleAddToCart = (data) => {
  // console.log('加入购物车数据:', data);
  if (localStorage.getItem("token") != null) {
    addGoods(data);
    //提示
    showToast("已加入购物车");
  } else {
    showToast({
      message: "请先登录",
      type: "error",
    });
    //保存当from页面
    localStorage.setItem("from", router.currentRoute.value.path);
    setTimeout(() => {
      router.replace("/login")
    }, 2000);
  }
};
</script>

<style scoped lang="scss">
.goods-view {
  width: 100vw;
  height: 100vh;
  z-index: 100;
  position: absolute;
  background-color: #f5f5f5;
}
.back {
  color: cornflowerblue;
  //加粗
  font-weight: bold;
  font-size: 40px;
  line-height: 80px;
  height: 80px;
}
.swiper {
  width: 100%;
  height: auto;
  img {
    width: 100%;
    height: 100%;
  }
}
/* 商品信息外层容器 */
.info {
  /* 让内容和边框等计算更清晰 */
  box-sizing: border-box;
  /* 左右内边距，拉开与外部的距离 */
  padding: 20px 24px;
  /* 让文字区域和图片等横向排列（如果是flex布局场景，可结合父级调整，这里先基础设置） */
  width: 100%;
  /* 背景色，与其他模块区分，可根据整体风格改 */
  background-color: #fff;
}

/* 价格、名称、简介的父容器，用于控制内部排版 */
.info > div {
  /* 用flex垂直排列，让价格、名称等依次分布 */
  display: flex;
  flex-direction: column;
  gap: 20px; /* 子元素之间的间距 */
}

/* 价格行容器 */
.info-price {
  display: flex;
  align-items: baseline;
  gap: 14px; /* 原价和现价的间距 */
}

/* 现价样式 */
.info-price span:first-child {
  /* 突出显示，可根据品牌色调整 */
  color: #e60012;
  /* 比原价大一些 */
  font-size: 46px;
  font-weight: 200;
}

/* 原价样式 */
.info-price span:last-child {
  color: #999;
  /* 中划线表示原价 */
  text-decoration: line-through;
  font-size: 34px;
}

/* 商品名称样式 */
.info-name {
  font-size: 34px;
  color: #333;
  /* 一行显示，超出省略，适配不同长度名称 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 商品简介/副标题样式 */
.info-brief {
  font-size: 28px;
  color: #666;
  /* 最多显示2行，超出省略，可根据需求调整行数 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
::v-deep.desc {
  padding: 16px;
  background-color: #fff;
  margin-top: 10px;
}

::v-deep.desc-title {
  font-size: 18px;
  color: #333;
  font-weight: 600;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f0f0f0;
}

/* 处理v-html渲染的内容 */
::v-deep.desc > div {
  line-height: 1.8; /* 优化文本行高，提升可读性 */
  color: #666;
  font-size: 15px;
}

/* 段落样式 */
::v-deep.desc > .desc-content > p {
  margin: 0 0 0 0; /* 段落间距 */
  text-align: justify; /* 文本两端对齐 */
}

/* 图片样式 */
::v-deep.desc > .desc-content img {
  display: block;
  max-width: 100%; /* 图片自适应容器宽度，防止溢出 */
  width: 100vw;
  height: auto; /* 保持图片比例 */
  // margin: 0 auto 20px; /* 图片居中，上下留出间距 */
  border-radius: 4px; /* 轻微圆角，视觉更柔和 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); /* 轻微阴影，增强层次感 */
}
</style>
